<!-- props扩展字段组件 -->
<template>
  <a-form-item
    label="占位符字"
    v-if="props.showFieldList?.includes('placeholder')"
  >
    <a-input
      :disabled="disabled"
      placeholder="输入文本占位符"
      v-model="copyProps.placeholder"
      @change="propsChange"
    />
  </a-form-item>
  <a-form-item label="最大字数" v-if="props.showFieldList?.includes('textMax')">
    <a-input-number
      :disabled="disabled"
      placeholder="请输入文本最大字数"
      v-model="copyProps.textMax"
      :min="1"
      @change="propsChange"
    />
  </a-form-item>
  <!-- 下拉选择设置 -->
  <a-form-item
    label="选项设置"
    v-if="props.showFieldList?.includes('selectOptions')"
  >
    <a-space class="option-set">
      <a-space direction="vertical">
        <a-input
          :disabled="disabled"
          v-for="option in copyProps.selectOptions"
          :key="option.value"
          @change="propsChange"
          :style="{ width: '160px' }"
          v-model="option.label"
          :placeholder="option.label"
          allow-clear
        />
      </a-space>
      <a-space class="operate">
        <icon-plus class="plus" @click="addSelectOption" />
        <icon-delete class="delete" @click="delSelectOption" />
      </a-space>
    </a-space>
  </a-form-item>
  <!-- 单选选项设置 -->
  <a-form-item
    label="选项设置"
    v-if="props.showFieldList?.includes('radioOptions')"
  >
    <a-space class="option-set">
      <a-space direction="vertical">
        <a-input
          :disabled="disabled"
          v-for="option in copyProps.radioOptions"
          :key="option.value"
          @change="propsChange"
          :style="{ width: '160px' }"
          v-model="option.label"
          :placeholder="option.label"
          allow-clear
        />
      </a-space>
      <a-space class="operate">
        <icon-plus class="plus" @click="addRadioOption" />
        <icon-delete class="delete" @click="delRadioOption" />
      </a-space>
    </a-space>
  </a-form-item>
  <!-- 复选选项设置 -->
  <a-form-item
    label="选项设置"
    v-if="props.showFieldList?.includes('checkBoxOptions')"
  >
    <a-space class="option-set">
      <a-space direction="vertical">
        <a-input
          :disabled="disabled"
          v-for="option in copyProps.checkOption"
          :key="option.value"
          @change="propsChange"
          :style="{ width: '160px' }"
          v-model="option.label"
          :placeholder="option.label"
          allow-clear
        />
      </a-space>
      <a-space class="operate">
        <icon-plus class="plus" @click="addCheckOption" />
        <icon-delete class="delete" @click="delCheckOption" />
      </a-space>
    </a-space>
  </a-form-item>
  <a-form-item
    label="格式校验"
    v-if="props.showFieldList?.includes('validate')"
  >
    <a-select
      :disabled="disabled"
      placeholder="选择校验类型"
      v-model="copyProps.validate"
      @change="propsChange"
    >
      <a-option value="bank" label="银行卡号" />
      <a-option value="phone" label="手机号码" />
      <a-option value="email" label="邮箱" />
      <a-option value="wxNumber" label="微信号码" />
    </a-select>
  </a-form-item>
  <TableExtend
    v-if="props?.showFieldList?.includes('detailTable')"
    v-model:props="props"
  />
</template>

<script setup lang="ts">
import clonedeep from 'lodash.clonedeep';
import { isJSON } from '@/utils/isType';
const emit = defineEmits(['propsChange']);
const props = defineProps<{
  props: any; //控件的props
  showFieldList?: string[]; //控件可以设置的字段名
  uuid: string; //控件的uuid
  ctlIsDefault?: number;
}>();

const copyProps = reactive<{ [propName: string]: any }>({}); //cope一份props
watch(
  //监听uuid改变复制Props
  () => props.uuid,
  () => {
    if (isJSON(props.props)) {
      for (const key in JSON.parse(props.props)) {
        copyProps[key] = JSON.parse(props.props)[key];
      }
    } else {
      for (const key in props.props) {
        copyProps[key] = props.props[key];
      }
    }

    if (props?.ctlIsDefault === 1) {
      disabled.value = true;
    }
  }
);

const disabled = ref(false);
const propsChange = () => {
  let newProps: any = clonedeep(copyProps);
  console.log('propsChange11111', isJSON(copyProps));
  if (!isJSON(copyProps) && copyProps) {
    newProps = JSON.stringify(newProps);
    console.log(2222, isJSON(newProps));
  }
  console.log('propsChange2222', copyProps, newProps, isJSON(newProps));

  emit('propsChange', newProps);
};

// 新增下拉选项
const addSelectOption = () => {
  let value;
  if (copyProps.selectOptions) {
    value = copyProps.selectOptions.length + 1;
  } else {
    copyProps.selectOptions = [];
    value = 0;
  }
  // let value = copyProps.selectOptions.length + 1;
  // let obj = { value, label: `选项${value}` }
  let obj = { value, label: '' };
  copyProps.selectOptions.push(obj);
  propsChange();
};
// 删除复选框选项
const delSelectOption = () => {
  copyProps.selectOptions.pop();
  propsChange();
};
// 新增单选框选项
const addRadioOption = () => {
  let value;
  if (copyProps.radioOptions) {
    value = copyProps.radioOptions.length + 1;
  } else {
    copyProps.radioOptions = [];
    value = 0;
  }
  // let obj = { value, label: `选项${value}` }
  let obj = { value, label: '' };
  copyProps.radioOptions.push(obj);
  propsChange();
};
// 删除单选框选项
const delRadioOption = () => {
  copyProps.radioOptions.pop();
  propsChange();
};

// 新增复选框选项
const addCheckOption = () => {
  let value;
  if (copyProps.checkOption) {
    value = copyProps.checkOption.length + 1;
  } else {
    copyProps.checkOption = [];
    value = 0;
  }
  // let obj = { value, label: `选项${value}` }
  let obj = { value, label: '' };
  copyProps.checkOption.push(obj);
  propsChange();
};

// 删除复选框选项
const delCheckOption = () => {
  copyProps.checkOption.pop();
  propsChange();
};
</script>

<style scoped></style>
